<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.css">
  <script src="//cdn.jsdelivr.net/npm/pace-js@1/pace.min.js"></script>

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"yimig.github.io","root":"/","scheme":"Muse","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":true},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta property="og:type" content="article">
<meta property="og:title" content="【C#】WPF基础：基本控件篇">
<meta property="og:url" content="http://yimig.github.io/2018/10/07/csharp_wpf_controler/index.html">
<meta property="og:site_name" content="Tim&#39;s Blog">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://47.94.231.166/wp-content/uploads/2018/10/devenv_2018-10-03_21-34-06.png">
<meta property="og:image" content="http://47.94.231.166/wp-content/uploads/2018/10/devenv_2018-10-10_16-15-15-217x300.png">
<meta property="og:image" content="http://47.94.231.166/wp-content/uploads/2018/10/devenv_2018-10-10_11-36-47-300x151.png">
<meta property="og:image" content="http://47.94.231.166/wp-content/uploads/2018/10/devenv_2018-10-10_16-55-09.png">
<meta property="og:image" content="http://47.94.231.166/wp-content/uploads/2018/10/devenv_2018-10-10_17-25-33-300x194.png">
<meta property="og:image" content="http://47.94.231.166/wp-content/uploads/2018/10/WpfApp1_2018-10-10_17-25-43-300x169.png">
<meta property="article:published_time" content="2018-10-07T15:00:38.000Z">
<meta property="article:modified_time" content="2020-10-28T15:37:49.114Z">
<meta property="article:author" content="Tim">
<meta property="article:tag" content="C#学习笔记">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://47.94.231.166/wp-content/uploads/2018/10/devenv_2018-10-03_21-34-06.png">

<link rel="canonical" href="http://yimig.github.io/2018/10/07/csharp_wpf_controler/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>【C#】WPF基础：基本控件篇 | Tim's Blog</title>
  


  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?64126ab668fa908027cba9464a0afec7";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>




  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<!-- hexo injector head_end start -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-math@4.0.0/dist/style.css">
<!-- hexo injector head_end end --></head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">Tim's Blog</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">Learn Everything!</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-fw fa-home"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-fw fa-user"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-fw fa-tags"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-fw fa-th"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>归档</a>

  </li>
        <li class="menu-item menu-item-schedule">

    <a href="/schedule/" rel="section"><i class="fa fa-fw fa-calendar"></i>日程表</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

  <a href="https://github.com/yimig" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yimig.github.io/2018/10/07/csharp_wpf_controler/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/uploads/avatar.png">
      <meta itemprop="name" content="Tim">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Tim's Blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          【C#】WPF基础：基本控件篇
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2018-10-07 23:00:38" itemprop="dateCreated datePublished" datetime="2018-10-07T23:00:38+08:00">2018-10-07</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-10-28 23:37:49" itemprop="dateModified" datetime="2020-10-28T23:37:49+08:00">2020-10-28</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/Coding/" itemprop="url" rel="index"><span itemprop="name">Coding</span></a>
                </span>
                  ，
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/Coding/Csharp/" itemprop="url" rel="index"><span itemprop="name">Csharp</span></a>
                </span>
                  ，
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/Coding/Csharp/WPF/" itemprop="url" rel="index"><span itemprop="name">WPF</span></a>
                </span>
            </span>

          
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="fa fa-file-word-o"></i>
              </span>
              <span>4.7k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="fa fa-clock-o"></i>
              </span>
              <span>4 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <hr>
<a id="more"></a>
<h1 id="①基础知识"><a href="#①基础知识" class="headerlink" title="①基础知识"></a>①基础知识</h1><h2 id="1-参数sender"><a href="#1-参数sender" class="headerlink" title="1.参数sender"></a>1.参数sender</h2><p>一般我们新建事件后vs都会自动帮我们创建事件引发的方法，比如</p>
<figure class="highlight csharp"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">private</span> <span class="keyword">void</span> <span class="title">button1_Click</span>(<span class="params"><span class="built_in">object</span> sender,RoutedEventArgs e</span>)</span>&#123;...&#125;</span><br></pre></td></tr></table></figure>
<p>sender代表发生事件的控件，被封装为了object类型，所以如果我们想要引用之，需要<strong>显示转换</strong>。如鼠标单击按钮的事件中，若我们想获得被单击的按钮控件，可以写为</p>
<figure class="highlight csharp"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Button button =(Button)sender;</span><br></pre></td></tr></table></figure>
<h2 id="2-参数e"><a href="#2-参数e" class="headerlink" title="2.参数e"></a>2.参数e</h2><p>参数e一般为EventArgs和RoutedEventArgs类型，RoutedEventArgs类型是路由事件，是一种特殊的EventArgs类型，我们将在以后学习，现在我们主要来讨论EventArgs类型： 如果object sender看作事件的主体，那么EventArgs e就可以看作<strong>事件的参数</strong>，形象一点说，如果把用户看作农夫，要完成“锄地”的动作，就要使用“锄头”这个sender，如此“锄地”事件发生时，系统就会把锄头落地的坐标、锄地的频率等等与锄地事件有关的<strong>信息</strong>打包成事件参数e发送给我们。 那么怎样使用这些数据呢？ 与参数object相同，EventArgs类型也是事件参数的一个“大类型”，要想使用之<strong>必须经过显示转换</strong>，在这之前我们需要知道这是由鼠标触发的事件（<strong>MouseEventArgs</strong>）还是键盘触发的事件（<strong>KeyPressEventArgs</strong>）抑或是其他东西触发的事件，如果转换为了错误的事件参数就会导致程序出错。</p>
<h3 id="鼠标事件（MouseEventArgs）"><a href="#鼠标事件（MouseEventArgs）" class="headerlink" title="鼠标事件（MouseEventArgs）"></a>鼠标事件（MouseEventArgs）</h3><p>鼠标事件常用的字段有： Button：表示用户按下鼠标哪个键触发了动作（左键Left、右键Right，在枚举类型MouseButtons中） Delta：表示用户触发事件的滚轮方向，这个值是方向（上滚为1，下滚为-1）乘以一个叫WHEEL_DELTA的常数（我这里测试为120，总之跟据符号就可以得到滚轮方向，值的大小不重要） Click：触发事件所按下键的次数 Location/X/Y：触发事件时鼠标的方位</p>
<h3 id="键盘事件（KeyPressEventArgs）"><a href="#键盘事件（KeyPressEventArgs）" class="headerlink" title="键盘事件（KeyPressEventArgs）"></a>键盘事件（KeyPressEventArgs）</h3><p>键盘事件常用的字段有： KeyChar：触发事件时按下的键，注意是char类型不是keys类型。   例判断用户是否为向上滚出发的事件：</p>
<figure class="highlight csharp"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">void</span> <span class="title">Button3_MouseWheel</span>(<span class="params"><span class="built_in">object</span> sender, EventArgs e</span>)</span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">MouseEventArgs args = (MouseEventArgs) e;</span><br><span class="line"><span class="keyword">if</span> (args.Delta &gt; <span class="number">0</span>)</span><br><span class="line">&#123;</span><br><span class="line">MessageBox.Show(<span class="string">&quot;上滚&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="可空类型"><a href="#可空类型" class="headerlink" title="可空类型"></a>可空类型</h2><p>可以为Null的类型称可空类型，有些类型（如int）默认初始化为0，所以无论如何也不会为空，故称不可空类型。 可空数据类型：<strong>引用类型</strong>（自定义类、string等等） 不可空数据类型：<strong>值类型</strong>（int、boolean、decimal、DateTime等等） 注意string s=””不等于string s=null。 第一个意义为长度为零的字符串，第二个意义为<strong>没有指向</strong>任何对象的字符串。 <strong>如果需要一个可空的值类型怎么办呢？</strong> 在类型后加一个问号，如</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">int? i&#x3D;null;</span><br></pre></td></tr></table></figure>
<p><strong>实际上，就是把值类型转换为了引用类型</strong> int类型可以隐式转换为int？类型，反之则不能。就像float可以隐式转换为double类型反之也不能一样，<strong>谨记，范围小的转换为范围大的可以隐式转换，反之只能显示转换！</strong> 如果int？ i=null转换为int类型就算显示转换也会报错。</p>
<h1 id="②WPF入门"><a href="#②WPF入门" class="headerlink" title="②WPF入门"></a>②WPF入门</h1><p>WPF使用xaml文件来设计<strong>窗口</strong>、控件等可视化交互，当然也可以在其中创建winform的类<strong>窗体</strong>（class）。它与winform最大的不同就是xaml设计的窗口、控件与主窗口功能代码在<strong>一个类</strong>中，所以WPF设计出的多窗口<strong>只需实例化</strong>无需设置访问性。</p>
<h2 id="初识xaml"><a href="#初识xaml" class="headerlink" title="初识xaml"></a>初识xaml</h2><p>xaml语法上类似于html，标题尖括号打头，反斜杠标题尖括号结尾。 这与winform相比开发起来更加直观。 如 <a target="_blank" rel="noopener" href="http://upane.cn/archives/786/devenv_2018-10-03_21-34-06"><img src="http://47.94.231.166/wp-content/uploads/2018/10/devenv_2018-10-03_21-34-06.png" alt=""></a> 可在其中为控件添加各种属性，写法也有两种，常见的为：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;Button Name&#x3D;&quot;subButton&quot; Click&#x3D;&quot;subButton_Click&quot; &#x2F;&gt;</span><br></pre></td></tr></table></figure>
<p>这种写法的优点是字少，写起来比较方便，但是当添加属性过多时就会显得长而冗杂，于是又有这种写法：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;Button Click&#x3D;&quot;subButton_Click&quot;&gt;</span><br><span class="line">&lt;Name&gt;&quot;subButton&quot;&lt;&#x2F;Name&gt;</span><br><span class="line">&lt;&#x2F;Button&gt;</span><br></pre></td></tr></table></figure>
<p>这种写法在控件属性较多时便显得一目了然，便于控制了。</p>
<h3 id="注意！xaml的注释方法为"><a href="#注意！xaml的注释方法为" class="headerlink" title="注意！xaml的注释方法为"></a>注意！xaml的注释方法为</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;!--&lt;&#x2F;span&gt;&lt;&#x2F;strong&gt;被注释的语句，可跨行&lt;strong&gt;&lt;span style&#x3D;&quot;color: #339966;&quot;&gt;--&gt;</span><br></pre></td></tr></table></figure>
<h2 id="控件的通用属性"><a href="#控件的通用属性" class="headerlink" title="控件的通用属性"></a>控件的通用属性</h2><p>Name：空间名，唯一，用于区分控件 Content：空间上的文本，不唯一 Visbility：控件的可见性（<strong>值是枚举类型，不是bool类型！</strong>在System.Windows.Visbility下，Collapsed为隐藏，Visible为可见） IsEnabled：空间是否可用，bool类型 Background：背景色，在等于号后按下Ctrl+J即可调出颜色提示栏 FontSize：字体大小 在控件中添加控件：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;控件&gt;</span><br><span class="line">&lt;控件.Content&gt;</span><br><span class="line">  （...其他控件)</span><br><span class="line">&lt;&#x2F;控件.Content&gt;</span><br><span class="line">&lt;&#x2F;控件&gt;</span><br></pre></td></tr></table></figure>
<p>有的控件中只允许添加一个控件，可以添加一个布局（StackPanel、Grid）来容纳多个控件。</p>
<h1 id="③WPF控件常用属性简介"><a href="#③WPF控件常用属性简介" class="headerlink" title="③WPF控件常用属性简介"></a>③WPF控件常用属性简介</h1><blockquote>
<p>未特殊声明的情况下，以下用法仅可在XAML中使用，不可在Class中使用。</p>
</blockquote>
<h2 id="0-Button按钮"><a href="#0-Button按钮" class="headerlink" title="0.Button按钮"></a>0.Button按钮</h2><h3 id="用法："><a href="#用法：" class="headerlink" title="用法："></a>用法：</h3><p>插入文字：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">XAML:</span><br><span class="line">&lt;Button Content&#x3D;&quot;TextHere&quot; &#x2F;&gt;</span><br><span class="line">&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;</span><br><span class="line">&lt;Button&gt;&quot;TextHere&quot;&lt;&#x2F;Button&gt;</span><br></pre></td></tr></table></figure>
<p>以上这俩效果相同 插入图片：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">XAML:</span><br><span class="line">&lt;Button&gt;</span><br><span class="line">  &lt;Button.Content&gt;</span><br><span class="line">    &lt;Image Source&#x3D;&quot;图片的相对地址&quot;&gt;&lt;&#x2F;Image&gt;</span><br><span class="line">  &lt;&#x2F;Button.Content&gt;</span><br><span class="line">&lt;&#x2F;Button&gt;</span><br><span class="line">&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;可省略为&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;&#x3D;</span><br><span class="line">&lt;Button&gt;</span><br><span class="line">  &lt;Image Source&#x3D;&quot;图片的相对地址&quot;&gt;&lt;&#x2F;Image&gt;</span><br><span class="line">&lt;&#x2F;Button&gt;</span><br></pre></td></tr></table></figure>
<p>这里只有Button可省略.Content。</p>
<h2 id="⒈TextBox文本输入框"><a href="#⒈TextBox文本输入框" class="headerlink" title="⒈TextBox文本输入框"></a>⒈TextBox文本输入框</h2><blockquote>
<p>可见、可输入文本的控件，若只需要可见文本可使用TextBlock控件。</p>
</blockquote>
<p>Text：内容文本 IsReadOnly：设置是否只读，bool类型，设置为true后无法对文本进行修改（可以复制） TextWrapping：枚举类型，设置为Wrap可自动折行 MaxLength：文本框内可输入字符的最大数量，整形</p>
<h2 id="⒉PasswordBox密码框"><a href="#⒉PasswordBox密码框" class="headerlink" title="⒉PasswordBox密码框"></a>⒉PasswordBox密码框</h2><blockquote>
<p>自动掩盖输入文本的控件</p>
</blockquote>
<p>Password：输入的文本，注意不是Text了。</p>
<h2 id="⒊CheckBox复选框"><a href="#⒊CheckBox复选框" class="headerlink" title="⒊CheckBox复选框"></a>⒊CheckBox复选框</h2><p>IsChecked：表示复选框是否已被选中，bool？类型，所以不能直接用if判断</p>
<h2 id="⒋RadioButton单选按钮"><a href="#⒋RadioButton单选按钮" class="headerlink" title="⒋RadioButton单选按钮"></a>⒋RadioButton单选按钮</h2><blockquote>
<p>要求用户对一个组进行单选的控件</p>
</blockquote>
<p>IsChecked：表示单选按钮是否已被选中，bool？类型。 GroupName：组名，一组单选按钮只能选择一个。</p>
<h2 id="⒌DatePicker日期选择器"><a href="#⒌DatePicker日期选择器" class="headerlink" title="⒌DatePicker日期选择器"></a>⒌DatePicker日期选择器</h2><p>SelectedDate：选择的日期，DateTime？类型，包含日期和时间。可为null，意义为未选择。（DateTime.Now为当前时间）</p>
<h2 id="6-Image图片控件"><a href="#6-Image图片控件" class="headerlink" title="6.Image图片控件"></a>6.Image图片控件</h2><p>Source：图片路径，路径为<strong>相对路径</strong>，即以程序视图的路径，若直接把图片资源放入程序文件夹内，则可以直接输入文件名。在Class中写法如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Image img &#x3D; new Image();&#x2F;&#x2F;创建一个图片控件</span><br><span class="line">img.Source&#x3D;new BitmapImage(new Uri(&quot;图片的相对路径&quot;,UriKind.Relative));</span><br></pre></td></tr></table></figure>
<h2 id="⒎ProgressBar进度条"><a href="#⒎ProgressBar进度条" class="headerlink" title="⒎ProgressBar进度条"></a>⒎ProgressBar进度条</h2><p>IsIndeterminate：不确定模式，进度条内的进度一条一条滚动前行，表示程序正在运行。bool类型，true启用。 Maximum：最大值 Minimum：最小值 Value：当前值</p>
<h2 id="⒏Menu菜单"><a href="#⒏Menu菜单" class="headerlink" title="⒏Menu菜单"></a>⒏Menu菜单</h2><p>菜单分为普通菜单（Menu）和上下文菜单（ContextMenu，俗称右键菜单）。 WPF中的Menu可以显示在任意位置，但是一般是用布局显示到页面顶部。 Menu下面可以放多个MenuItem（其实是放到Items属性中）。MenuItem下还可以放MenuItem（还是Items属性中），属性Header显示内容。</p>
<h3 id="使用方法："><a href="#使用方法：" class="headerlink" title="使用方法："></a>使用方法：</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;Menu&gt;</span><br><span class="line">  &lt;MenuItem Header&#x3D;&quot;标题名1&quot; &#x2F;&gt; 子菜单标题</span><br><span class="line">  &lt;MenuItem Header&#x3D;&quot;标题名2&quot; &gt;</span><br><span class="line">    &lt;MenuItem Header&#x3D;&quot;标题名2.1&quot; &#x2F;&gt; 孙菜单标题</span><br><span class="line">    &lt;MenuItem Header&#x3D;&quot;标题名2.2&quot; &#x2F;&gt;</span><br><span class="line">  &lt;&#x2F;MenuItem&gt;</span><br><span class="line">&lt;&#x2F;Menu&gt;</span><br></pre></td></tr></table></figure>
<p>把Menu “拼”到窗口顶部详见布局篇 示例： <a target="_blank" rel="noopener" href="http://upane.cn/archives/786/devenv_2018-10-10_16-15-15"><img src="http://47.94.231.166/wp-content/uploads/2018/10/devenv_2018-10-10_16-15-15-217x300.png" alt=""></a> 效果： <a target="_blank" rel="noopener" href="http://upane.cn/archives/786/devenv_2018-10-10_11-36-47"><img src="http://47.94.231.166/wp-content/uploads/2018/10/devenv_2018-10-10_11-36-47-300x151.png" alt=""></a></p>
<h2 id="⒐ToolBar工具栏"><a href="#⒐ToolBar工具栏" class="headerlink" title="⒐ToolBar工具栏"></a>⒐ToolBar工具栏</h2><p>工具栏就是一般在菜单栏下面的用作快速打开菜单栏内项目的工具，像：<a target="_blank" rel="noopener" href="http://upane.cn/archives/786/devenv_2018-10-10_16-55-09"><img src="http://47.94.231.166/wp-content/uploads/2018/10/devenv_2018-10-10_16-55-09.png" alt=""></a> 就是工具栏。</p>
<h3 id="使用方法：-1"><a href="#使用方法：-1" class="headerlink" title="使用方法："></a>使用方法：</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;ToolBar&gt;</span><br><span class="line">  (...控件)</span><br><span class="line">&lt;\ToolBar&gt;</span><br></pre></td></tr></table></figure>
<p>示例： <a target="_blank" rel="noopener" href="http://upane.cn/archives/786/devenv_2018-10-10_17-25-33"><img src="http://47.94.231.166/wp-content/uploads/2018/10/devenv_2018-10-10_17-25-33-300x194.png" alt=""></a> 效果： <a target="_blank" rel="noopener" href="http://upane.cn/archives/786/wpfapp1_2018-10-10_17-25-43"><img src="http://47.94.231.166/wp-content/uploads/2018/10/WpfApp1_2018-10-10_17-25-43-300x169.png" alt=""></a> 由上图可以看出，某些控件包含入工具栏后外观会有变化。比如RadioButton、CheckBox等。</p>

    </div>

    
    
    

      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/C-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" rel="tag"># C#学习笔记</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2018/10/01/tutorial_idea2/" rel="prev" title="【Part.2】IntelliJ IDEA小教程：代码操作篇">
      <i class="fa fa-chevron-left"></i> 【Part.2】IntelliJ IDEA小教程：代码操作篇
    </a></div>
      <div class="post-nav-item">
    <a href="/2018/10/08/csharp_wpf_layout/" rel="next" title="【C#】WPF基础：页面布局篇">
      【C#】WPF基础：页面布局篇 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          
    <div class="comments" id="gitalk-container"></div>

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E2%91%A0%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86"><span class="nav-number">1.</span> <span class="nav-text">①基础知识</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E5%8F%82%E6%95%B0sender"><span class="nav-number">1.1.</span> <span class="nav-text">1.参数sender</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E5%8F%82%E6%95%B0e"><span class="nav-number">1.2.</span> <span class="nav-text">2.参数e</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%EF%BC%88MouseEventArgs%EF%BC%89"><span class="nav-number">1.2.1.</span> <span class="nav-text">鼠标事件（MouseEventArgs）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6%EF%BC%88KeyPressEventArgs%EF%BC%89"><span class="nav-number">1.2.2.</span> <span class="nav-text">键盘事件（KeyPressEventArgs）</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8F%AF%E7%A9%BA%E7%B1%BB%E5%9E%8B"><span class="nav-number">1.3.</span> <span class="nav-text">可空类型</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E2%91%A1WPF%E5%85%A5%E9%97%A8"><span class="nav-number">2.</span> <span class="nav-text">②WPF入门</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%9D%E8%AF%86xaml"><span class="nav-number">2.1.</span> <span class="nav-text">初识xaml</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B3%A8%E6%84%8F%EF%BC%81xaml%E7%9A%84%E6%B3%A8%E9%87%8A%E6%96%B9%E6%B3%95%E4%B8%BA"><span class="nav-number">2.1.1.</span> <span class="nav-text">注意！xaml的注释方法为</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%8E%A7%E4%BB%B6%E7%9A%84%E9%80%9A%E7%94%A8%E5%B1%9E%E6%80%A7"><span class="nav-number">2.2.</span> <span class="nav-text">控件的通用属性</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E2%91%A2WPF%E6%8E%A7%E4%BB%B6%E5%B8%B8%E7%94%A8%E5%B1%9E%E6%80%A7%E7%AE%80%E4%BB%8B"><span class="nav-number">3.</span> <span class="nav-text">③WPF控件常用属性简介</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#0-Button%E6%8C%89%E9%92%AE"><span class="nav-number">3.1.</span> <span class="nav-text">0.Button按钮</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%94%A8%E6%B3%95%EF%BC%9A"><span class="nav-number">3.1.1.</span> <span class="nav-text">用法：</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E2%92%88TextBox%E6%96%87%E6%9C%AC%E8%BE%93%E5%85%A5%E6%A1%86"><span class="nav-number">3.2.</span> <span class="nav-text">⒈TextBox文本输入框</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E2%92%89PasswordBox%E5%AF%86%E7%A0%81%E6%A1%86"><span class="nav-number">3.3.</span> <span class="nav-text">⒉PasswordBox密码框</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E2%92%8ACheckBox%E5%A4%8D%E9%80%89%E6%A1%86"><span class="nav-number">3.4.</span> <span class="nav-text">⒊CheckBox复选框</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E2%92%8BRadioButton%E5%8D%95%E9%80%89%E6%8C%89%E9%92%AE"><span class="nav-number">3.5.</span> <span class="nav-text">⒋RadioButton单选按钮</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E2%92%8CDatePicker%E6%97%A5%E6%9C%9F%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-number">3.6.</span> <span class="nav-text">⒌DatePicker日期选择器</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-Image%E5%9B%BE%E7%89%87%E6%8E%A7%E4%BB%B6"><span class="nav-number">3.7.</span> <span class="nav-text">6.Image图片控件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E2%92%8EProgressBar%E8%BF%9B%E5%BA%A6%E6%9D%A1"><span class="nav-number">3.8.</span> <span class="nav-text">⒎ProgressBar进度条</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E2%92%8FMenu%E8%8F%9C%E5%8D%95"><span class="nav-number">3.9.</span> <span class="nav-text">⒏Menu菜单</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%EF%BC%9A"><span class="nav-number">3.9.1.</span> <span class="nav-text">使用方法：</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E2%92%90ToolBar%E5%B7%A5%E5%85%B7%E6%A0%8F"><span class="nav-number">3.10.</span> <span class="nav-text">⒐ToolBar工具栏</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%EF%BC%9A-1"><span class="nav-number">3.10.1.</span> <span class="nav-text">使用方法：</span></a></li></ol></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="Tim"
      src="/uploads/avatar.png">
  <p class="site-author-name" itemprop="name">Tim</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">90</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">24</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">40</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/yimig" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;yimig" rel="noopener" target="_blank"><i class="fa fa-fw fa-github"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:zhangyiming@programmer.net" title="E-Mail → mailto:zhangyiming@programmer.net" rel="noopener" target="_blank"><i class="fa fa-fw fa-envelope"></i>E-Mail</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://leetcode.com/yimig/" title="LeeCode → https:&#x2F;&#x2F;leetcode.com&#x2F;yimig&#x2F;" rel="noopener" target="_blank"><i class="fa fa-fw fa-code"></i>LeeCode</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://www.zhihu.com/people/tim-2-96" title="zhihu → https:&#x2F;&#x2F;www.zhihu.com&#x2F;people&#x2F;tim-2-96" rel="noopener" target="_blank"><i class="fa fa-fw fa-question-circle"></i>zhihu</a>
      </span>
  </div>


  <div class="links-of-blogroll motion-element">
    <div class="links-of-blogroll-title">
      <i class="fa fa-fw fa-link"></i>
      Links
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="https://upane.cn/" title="https:&#x2F;&#x2F;upane.cn" rel="noopener" target="_blank">博客旧址</a>
        </li>
    </ul>
  </div>

      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Tim</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    <span title="站点总字数">183k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    <span title="站点阅读时长">2:46</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://muse.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/muse.js"></script>


<script src="/js/next-boot.js"></script>


  <script defer src="//cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three.min.js"></script>
    <script defer src="//cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_sphere.min.js"></script>


  
  <script>
    (function(){
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      bp.src = (curProtocol === 'https') ? 'https://zz.bdstatic.com/linksubmit/push.js' : 'http://push.zhanzhang.baidu.com/push.js';
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>




  
<script src="/js/local-search.js"></script>













  

  

  

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">

<script>
NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
    var gitalk = new Gitalk({
      clientID    : 'a876807f33858291f9d9',
      clientSecret: '7a5c6a83611c309965d7339d7ca5f16e34a21e9f',
      repo        : 'yimig.github.io',
      owner       : 'yimig',
      admin       : ['yimig'],
      id          : '34ec8c546ac8563ed7dba0a2dd2388ee',
        language: '',
      distractionFreeMode: true
    });
    gitalk.render('gitalk-container');
  }, window.Gitalk);
});
</script>

</body>
</html>
